<template>
  <div>
    <van-cell class="comment">
      <template>
        <div class="comment-list">
          <van-image round fit="cover" :src="currentItem.aut_photo" />
          <div class="info-box">
            <div class="name">{{ currentItem.aut_name }}</div>
            <div class="content">{{ currentItem.content }}</div>
            <div>
              <span class="time">{{ currentItem.pubdate | relvTime }}</span>
            </div>
          </div>
        </div>
      </template>
    </van-cell>

    <van-divider>回复列表</van-divider>

    <van-list
      class="comment"
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <van-cell v-for="item in list" :key="item.com_id">
        <template>
          <div class="comment-list">
            <van-image round fit="cover" :src="item.aut_photo" />
            <div class="info-box">
              <div class="name">{{ item.aut_name }}</div>
              <div class="content">{{ item.content }}</div>
              <div>
                <span class="time">{{ item.pubdate | relvTime }}</span>
              </div>
            </div>
          </div>
        </template>
      </van-cell>
    </van-list>

    <!-- 评论框 -->
    <van-field
      class="send-box"
      v-model.trim="msg"
      center
      clearable
      placeholder="请输入评论内容"
      @keyup.enter="send"
    >
      <template #button>
        <van-button @click="send" size="small" type="info">发布</van-button>
      </template>
    </van-field>
  </div>
</template>

<script>
import { cmtListAPI, sendCmtAPI } from "@/api";
export default {
  props: ["currentItem"],
  data() {
    return {
      list: [],
      loading: false,
      finished: false,
      offset: null,
      msg: "",
    };
  },
  methods: {
    async onLoad() {
      // console.log(this.currentItem);
      let res = await cmtListAPI({
        type: "c",
        source: this.currentItem.com_id,
        offset: this.offset,
      });
      this.list.push(...res.data.data.results);
      //   console.log(this.list);
      this.offset = res.data.data.last_id;
      this.loading = false;
      if (res.data.data.end_id == this.offset) {
        this.finished = true;
      }
    },

    async send() {
      if (this.msg == "") return this.$toast("请输入评论内容");
      let res = await sendCmtAPI({
        target: this.currentItem.com_id,
        content: this.msg,
        art_id: this.$route.query.id,
      });
      this.list.unshift(res.data.data.new_obj);
      this.msg = "";
      this.$toast.success("发布成功");
    },
  },
};
</script>

<style lang="less" scoped>
.comment {
  margin-bottom: 55px;
  .comment-list {
    display: flex;
    .van-image {
      width: 50px;
      height: 50px;
      margin-right: 10px;
    }
    .info-box {
      flex: 1;
      .name {
        color: rgb(70, 107, 157);
      }
      .content {
        margin: 8px 0;
      }
      .time {
        color: #ccc;
      }
      .huifu {
        vertical-align: middle;
      }
    }
  }
}
.send-box {
  position: fixed;
  width: 100%;
  bottom: 0px;
  left: 0px;
}
</style>
